<template>
  <div>
    <a-spin v-if="initLoading" :spinning="initLoading"> </a-spin>

    <template v-else>
      <a-select
        :show-search="record.options.showSearch"
        :mode="record.options.multiple ? 'multiple' : 'default'"
        optionFilterProp="label"
        :placeholder="record.options.placeholder"
        allow-clear
        v-if="
          record.options.dictionaryLevel == 1 &&
          record.options.dictionaryShowType == 1
        "
        v-model="data"
        @change="change"
      >
        <a-select-option
          v-for="(item, index) in options"
          :value="item.value"
          :key="index"
          :label="item.name"
        >
          <div v-if="item.color">
            <a-button
              :title="item.label"
              :key="item.value"
              :style="{
                'background-color': item.color,
                color: '#fff',
                'font-size': '12px',
                border: 'none',
              }"
              shape="round"
              size="small"
            >
              {{ item.label }}</a-button
            >
          </div>
          <span v-else :title="item.label">
            {{ item.label }}
          </span>
        </a-select-option>
      </a-select>

      <a-checkbox-group
        v-model="data"
        v-if="
          record.options.dictionaryLevel == 1 &&
          record.options.dictionaryShowType == 3
        "
        @change="change"
      >
        <a-checkbox
          :value="item.value"
          :key="index"
          v-for="(item, index) in options"
        >
          <span
            v-if="item.color"
            class="eip-color-btn"
            :style="{ 'background-color': item.color }"
          >
            {{ item.label }}
          </span>
          <span v-else>
            {{ item.label }}
          </span>
        </a-checkbox>
      </a-checkbox-group>

      <a-radio-group
        @change="change"
        v-model="data"
        v-if="
          record.options.dictionaryLevel == 1 &&
          record.options.dictionaryShowType == 2
        "
      >
        <a-radio
          v-for="(item, index) in options"
          :value="item.value"
          :key="index"
          ><span
            v-if="item.color"
            class="eip-color-btn"
            :style="{ 'background-color': item.color }"
          >
            {{ item.label }}
          </span>
          <span v-else>
            {{ item.label }}
          </span>
        </a-radio>
      </a-radio-group>

      <a-tree-select
        v-if="record.options.dictionaryLevel == 2 && record.options.multiple"
        :placeholder="record.options.placeholder"
        allow-clear
        @change="change"
        tree-checkable
        v-model="data"
        show-search
        style="width: 100%"
        treeNodeFilterProp="title"
        :tree-data="options"
        :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
      >
      </a-tree-select>

      <a-tree-select
        v-if="record.options.dictionaryLevel == 2 && !record.options.multiple"
        :placeholder="record.options.placeholder"
        allow-clear
        @change="change"
        v-model="data"
        show-search
        style="width: 100%"
        treeNodeFilterProp="title"
        :tree-data="options"
        :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
      >
      </a-tree-select>
    </template>
  </div>
</template>
<script>
import {
  dictionaryParentId,
  dictionaryQueryByIds,
} from "@/services/system/zerocode/run/edit";
export default {
  props: ["value", "record", "disabled"],
  data() {
    return {
      initLoading: false, //初始化是否加载效果
      options: [],
      data: [],
    };
  },
  watch: {
    value(value) {
      if (value) {
        this.data = value;
      }
    },
  },
  created() {
    this.initData();
  },
  methods: {
    /**
     *
     */
    initData() {
      if (this.record.options.dictionaryId) {
        this.initLoading = true;
        switch (this.record.options.dictionaryLevel) {
          case 1:
            dictionaryParentId(this.record.options.dictionaryId).then(
              (result) => {
                var dictionaryParentResult = result.data;
                var resultDynamic = [];
                dictionaryParentResult.forEach((f) => {
                  resultDynamic.push({
                    label: f.name,
                    value: f.dictionaryId,
                    color: f.color,
                  });
                });
                this.options = resultDynamic;
                this.initLoading = false;
              }
            );
            break;
          case 2:
            dictionaryQueryByIds({
              id: this.record.options.dictionaryId,
            }).then((result) => {
              this.options = result.data;
              this.initLoading = false;
            });
            break;
          default:
            this.initLoading = false;
            break;
        }
      }
    },
    change(value) {
      this.$emit("change", this.data);
    },
  },
};
</script>
<style lang="less" scoped>
.eip-color-btn {
  padding: 4px 12px;
  font-size: 12px;
  line-height: 24px;
  border-radius: 24px;
  color: rgb(255, 255, 255);
  white-space: normal;
}
</style>
